<script setup>
import { Five } from '@realsee/five';
import { useFiveCurrentState,useFiveEventCallback } from '@realsee/five/vue';
import { computed,inject } from 'vue';
import modelRoomLabels from '@realsee/open-works/virtual/81gmMq5a7zbF9leWMk/modelRoomLabels.json' // modelRoomLabels

const [currentState, setState] = useFiveCurrentState();

const text = computed(() =>
  currentState.value.mode === Five.Mode.Floorplan
    ? '切换到全景态'
    : '切换到模型态'
);
// five实例
const five = inject('fiveInstance')
useFiveEventCallback('modelLoaded', () => {
	five.value.five.plugins.modelRoomLabelPlugin.load(modelRoomLabels)
})

const onClick = () => {
  if (currentState.value.mode === Five.Mode.Panorama) {
    setState({ mode: Five.Mode.Floorplan });
    return;
  }

  if (currentState.value.mode === Five.Mode.Floorplan) {
    setState({ mode: Five.Mode.Panorama });
    return;
  }
};
</script>

<template>
  <van-button type="success" @click="onClick" class="btn">{{ text }}</van-button>
</template>

<style scoped>
.btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0 10px;
  height: 30px;
}
</style>
